import { ref, getCurrentInstance, computed, onMounted, nextTick, watch, provide } from "vue"
import { propertyRegistered, propertyGroup } from "./propertyRegister"
import type { Designer } from "../../type"
import propEditors from "./property-editor/index"
import { isNumber } from "/@/utils/is"

export default function useFormSetting(selectedWidget, props) {
  /**
   * 是否展示折叠面板
   * @param widgetProps 组件的属性
   * @returns
   */
  const isShowPanel = (widgetProps) => {
    const configWidgetProps = new Set(Object.keys(widgetProps.props))
    return Object.keys(selectedWidget.value.props).filter((e) => configWidgetProps.has(e)).length > 0
  }

  const hasPropEditor = (propName, editorName) => {
    const designer = props.designer || ({} as Designer)
    if (!editorName) {
      console.log(propName, " 对应的编辑器名称为空")
      return false
    }

    /* alert组件注册了两个type属性编辑器，跳过第一个type属性编辑器，只显示第二个alert-type属性编辑器！！ */
    if (propName.indexOf("-") <= -1) {
      const uniquePropName = selectedWidget.value.type + "-" + propName
      if (propertyRegistered(uniquePropName)) {
        console.warn("uniquePropName", uniquePropName, " 已被注册")
        return false
      }
    }

    const originalPropName = propName.replace(selectedWidget.value.type + "-", "") //去掉组件名称前缀-，如果有的话！！

    // 表单属性
    if ("diy-form-setting" === selectedWidget.value.type) {
      return designer.hasFormConfig(originalPropName) && getPropEditor(propName, editorName)
    }

    return designer.hasWidgetConfig(selectedWidget.value, originalPropName) && getPropEditor(propName, editorName)
  }

  /**
   * 查询属性编辑器
   *
   * 查找顺序
   * 1. 通过 [type-属性名-editor] 查找当前引入的属性编辑器
   * 2. 通过 [type-属性名-editor] 查找全局注册的属性编辑器
   * 3. 通过 [属性名-editor] 查找当前引入的属性编辑器
   * @param propName 属性名
   * @param editorName 编辑器名称
   */
  const getPropEditor = (propName, editorName) => {
    const originalPropName = propName.replace(selectedWidget.value.type + "-", "") //去掉组件名称前缀-，如果有的话！！
    const ownPropEditorName = `${selectedWidget.value.type}-${originalPropName}-editor`
    // console.log('ownPropEditorName', ownPropEditorName, !!propEditors[ownPropEditorName])

    const ownPropEditor = propEditors[ownPropEditorName]
    if (ownPropEditor) {
      return ownPropEditor
    }

    const appContext = getCurrentInstance()?.appContext
    // step 先从Vue3全局注册的属性编辑器组件查找
    const editor = appContext?.components[ownPropEditorName] || propEditors[editorName]
    if (!editor) {
      console.warn("未查询到属性编辑器 ", ownPropEditorName, " | ", editorName)
    }
    return editor
  }

  const updateFormItemConfig = (designer: Designer | undefined) => {
    if (!designer) {
      return
    }
    const globalConfig = designer.globalConfig
    let formLabelCol = (globalConfig.labelCol || {}) as any
    let formLabelStyle = (globalConfig.labelStyle || {}) as any

    let labelWidth = formLabelStyle.width
    labelWidth = globalConfig.layoutType === "vertical" ? "100%" : labelWidth
    const newLabelWidth = isNumber(labelWidth) ? `${labelWidth}px` : labelWidth

    labelWidth = labelWidth ? newLabelWidth : "100%"

    const textAlign = designer.globalConfig.layoutType === "vertical" ? "left" : formLabelStyle.textAlign

    formLabelStyle = { ...formLabelStyle, width: labelWidth, textAlign }
    formLabelCol = { ...formLabelCol, style: formLabelStyle }
    designer.formItemConfig.labelCol = { ...formLabelCol, style: formLabelStyle }
    console.log("==> updateFormItemConfig ", designer.formItemConfig)
  }

  return {
    isShowPanel,
    hasPropEditor,
    getPropEditor,
    updateFormItemConfig,
  }
}
